<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>使用hugo搭建个人博客 | Dirac Lee</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noodp" />
<meta name="Description" content="这是一篇教你如何使用hugo搭建个人博客的文章。"><link rel="next" href="https://diraclee.gitee.io/2020/06/install_golong/" /><link rel="canonical" href="https://diraclee.gitee.io/2020/06/build-blog-with-hugo/" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff"><meta property="og:title" content="使用hugo搭建个人博客" />
<meta property="og:description" content="这是一篇教你如何使用hugo搭建个人博客的文章。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://diraclee.gitee.io/2020/06/build-blog-with-hugo/" />
<meta property="article:published_time" content="2020-06-24T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-06-24T00:00:00+00:00" />
<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "使用hugo搭建个人博客",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/diraclee.gitee.io\/2020\/06\/build-blog-with-hugo\/"
        },"image": {
                "@type": "ImageObject",
                "url": "https:\/\/diraclee.gitee.io\/logo.png",
                "width":  800 ,
                "height":  600 
            },"genre": "posts","keywords": "Hugo","wordcount":  1440 ,
        "url": "https:\/\/diraclee.gitee.io\/2020\/06\/build-blog-with-hugo\/","datePublished": "2020-06-24T00:00:00\x2b00:00","dateModified": "2020-06-24T00:00:00\x2b00:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
                "@type": "Organization",
                "name": "xxxx",
                "logo": {
                "@type": "ImageObject",
                "url": "https:\/\/diraclee.gitee.io\/logo.png",
                "width":  127 ,
                "height":  40 
                }
            },"description": "这是一篇教你如何使用hugo搭建个人博客的文章。"
    }
    </script><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/css/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/css/lib/animate/animate.min.css"></head>
    <body><script>
            window.isDark = (window.localStorage && window.localStorage.getItem('theme')) === 'dark';
            window.isDark && document.body.classList.add('dark-theme');
        </script><div class="wrapper"><nav class="navbar">
    <div class="navbar-container">
        <div class="navbar-header animated bounceIn">
            <a href="https://diraclee.gitee.io">Dirac Lee</a>
        </div>
        <div class="navbar-menu"><a class="menu-item" href="https://diraclee.gitee.io/posts" title="">文章</a><a class="menu-item" href="https://diraclee.gitee.io/tags" title="">标签</a><a class="menu-item" href="https://diraclee.gitee.io/categories" title="">分类</a><a class="menu-item" href="https://diraclee.gitee.io/about" title="">关于</a><a class="menu-item" href="https://diraclee.gitee.io" title="English"><i class="fas fa-language fa-fw"></i></a><a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180 fa-fw" title="切换主题"></i></a>
        </div>
    </div>
</nav><nav class="navbar-mobile">
    <div class="navbar-container">
        <div class="navbar-header">
            <div class="navbar-header-title animated bounceIn">
                <a href="https://diraclee.gitee.io">Dirac Lee</a>
            </div>
            <div class="menu-toggle" id="menu-toggle">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="navbar-menu" id="mobile-menu"><a class="menu-item" href="https://diraclee.gitee.io/posts" title="">文章</a><a class="menu-item" href="https://diraclee.gitee.io/tags" title="">标签</a><a class="menu-item" href="https://diraclee.gitee.io/categories" title="">分类</a><a class="menu-item" href="https://diraclee.gitee.io/about" title="">关于</a><a class="menu-item" href="https://diraclee.gitee.io" title="English"></a><a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180 fa-fw" title="切换主题"></i></a>
        </div>
    </div>
</nav><main class="main">
                <div class="container"><article class="page"><h1 class="post-title animated flipInX">使用hugo搭建个人博客</h1><div class="post-meta">
            <div class="post-meta-main"><a class="author" href="https://diraclee.gitee.io" rel="author" target="_blank">
                    <i class="fas fa-user-circle fa-fw"></i>Dirac Lee
                </a>&nbsp;<span class="post-category">收录于&nbsp;<i class="far fa-folder fa-fw"></i><a href="https://diraclee.gitee.io/categories/%E6%95%99%E7%A8%8B/">教程</a>&nbsp;</span></div>
            <div class="post-meta-other"><i class="far fa-calendar-alt fa-fw"></i><time datetime=2020-06-24>2020-06-24</time>&nbsp;
                <i class="fas fa-pencil-alt fa-fw"></i>约 1440 字&nbsp;
                <i class="far fa-clock fa-fw"></i>预计阅读 3 分钟&nbsp;</div>
        </div><div class="post-content"><a class="post-dummy-target" id="使用hugo搭建个人博客"></a><h3>使用hugo搭建个人博客</h3>
<blockquote>
<p>Hugo: The world’s fastest framework for building websites.</p>
</blockquote>
<a class="post-dummy-target" id="hugo-简介"></a><h3>Hugo 简介：</h3>
<p>hugo 是使用 go 语言编写的网站搭建框架，正如它的官网介绍的那样，它是这个世界上最快的网站搭建框架。 相比 hexo，hugo 的插件不够完善，主题也不是很多，可能目前唯一的优势就是部署更快了吧。</p>
<p>但是从长远来看，还是选择 hugo 更好一些。</p>
<p>一是有了 hexo 等框架的资源，社区造一个主题或者插件不是什么难事，至少省去了设计的纠结。所以框架、主题资源不多的情况在未来应该会解决。</p>
<p>二是博客文章随着时间流逝会越积越多，hexo 总有一天会满足不了我们的需求。例如每写一篇文章就得等它部署几分钟的情况，现在就时有发生。而 hugo 则永远是 1 秒钟部署，无论这是你的第几篇文章。</p>
<p>好的，看完以上的介绍，如果你对 Hugo 有兴趣，来跟我一起安装部署吧。</p>
<a class="post-dummy-target" id="hugo-安装"></a><h3>Hugo 安装：</h3>
<p>你既可以在官方下载地址进行下载，也可以去Hugo的GitHub 地址release板块进行下载。值得一提的是，这两种下载方式都是托管在 AWS 上的，国内经常访问不了。</p>
<p>所以我们去<a href="https://gitee.com/diraclee/hugo" target="_blank">Hugo的Gitee地址</a>将其源码克隆下来，然后用 golang 自行编译。如果你没有安装 golang，请参考<a href="https://diraclee.gitee.io/2020/06/install_golong/" target="_blank">我的另一篇文章</a>。</p>
<p>我们使用以下命令编译源文件：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash"><span class="nb">cd</span> hugo <span class="c1"># 进入源码目录</span>
go install <span class="c1"># 安装依赖</span>
go build <span class="c1"># 编译</span>
</code></pre></td></tr></table>
</div>
</div><p>编译完成后会发现源码目录多了一个可执行文件 hugo.exe，我们就是使用这个命令来搭建博客的。为了方便，我们将该文件目录添加到环境变量中，这样不论在哪个目录，都可以执行 hugo 命令。</p>
<a class="post-dummy-target" id="新建-hugo-项目"></a><h3>新建 Hugo 项目</h3>
<p>我们可以使用以下命令新建 Hugo 站点项目：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash">hugo new site blog-hugo
<span class="nb">cd</span> blog-hugo
</code></pre></td></tr></table>
</div>
</div><p>其中 blog-hugo 是我们的站点项目名，我们之后的所有操作都是基于这个目录进行的。</p>
<p>进入到这个项目目录，我们会发现 themes 文件夹是空的，我们先给项目安装一个主题吧。 你可以在 <a href="https://themes.gohugo.io/" target="_blank">Hugo 官网的 Themes 菜单</a> 下找到一个你喜欢的主题克隆到主题文件夹。例如我选择了 LoveIt 主题：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash"><span class="nb">cd</span> themes
git clone https://github.com/dillonzq/LoveIt.git
</code></pre></td></tr></table>
</div>
</div><p>按照主题文件夹下的 README.md的指导信息，将在主题的 exampleSite 目录下的 config.toml 文件复制到你的站点目录下并覆盖原同名文件，然后根据自己的需求更改。建议将 exampleSite 目录的所有文件都复制到站点目录下，以便参考。</p>
<p>配置好主题，我们来写一篇文章吧。使用以下指令来新建一篇名为 blog 的文章：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash">hugo new post/blog.md  
<span class="nb">cd</span> content/post
code blog.md  <span class="c1"># 用 vscode 写文章</span>
</code></pre></td></tr></table>
</div>
</div><p>文章使用 markdown 来书写，而且文章应当以以下格式开头，以便 Hugo 能够按照你的配置进行分类。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">---
title: Blog
author: &#34;Dirac Lee&#34;
discription: &#34;&#34;
categories: [&#34;&#34;]
tags: [&#34;&#34;]
date: 2020-02-26
---

(此处省略一篇旷世大作全文)

</code></pre></td></tr></table>
</div>
</div><p>写完文章之后我们在本地启动我们的博客项目预览一下吧：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash">hugo server -t LoveIt --buildDrafts
</code></pre></td></tr></table>
</div>
</div><p>启动以后在 http://localhost:1313/ 来进行查看，看看自己的博客怎么样？</p>
<a class="post-dummy-target" id="部署到-gitee"></a><h3>部署到 Gitee</h3>
<p>我选择了国内代码托管平台 Gitee，而没有选择大家喜闻乐见的 GitHub。这是因为国内访问 GitHub 是在是太慢了，这将导致你的博客半天打不开，就会让人很不爽。</p>
<p>首先我们先在 Gitee 上创建一个与你 Gitee 账号名相同的项目，例如我的是 diraclee。 然后点击 服务 –&gt; Gitee Pages 来申请该服务。</p>
<p>完成之后执行以下命令来创建一个静态网站子项目：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash">hugo -t LoveIt --baseUrl<span class="o">=</span><span class="s2">&#34;https://diraclee.gitee.io&#34;</span> --buildDrafts
</code></pre></td></tr></table>
</div>
</div><p>其中 diraclee 应该替换你的 gitee 账号名，以下均类似。</p>
<p>完成后会生成一个新文件夹 public，这就是 Hugo 为你创建的静态网站项目，进去将这个项目 push 到 Gitee 就可以了。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash"><span class="nb">cd</span> public
git init
git add .
git commit -m <span class="s2">&#34;我的hugo第一次提交&#34;</span>
git remote add origin https://gitee.com/diraclee/diraclee.git 
git push -u origin master
</code></pre></td></tr></table>
</div>
</div><a class="post-dummy-target" id="更新博客"></a><h3>更新博客</h3>
<p>首先还是使用以下命令来创建博客文件：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash">hugo new posts/another_blog.md
<span class="nb">cd</span> content/posts
code another_blog.md  <span class="c1"># 用 vscode 写文章</span>
</code></pre></td></tr></table>
</div>
</div><p>在你写完一篇文章之后，首先要更新本地的静态网站， 然后将其再次 push 到 gitee 上去：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-bash" data-lang="bash">hugo -t LoveIt --baseUrl<span class="o">=</span><span class="s2">&#34;https://diraclee.gitee.io&#34;</span> --buildDrafts
<span class="nb">cd</span> public
git add .
git commit -m <span class="s2">&#34;又更新了一些文章&#34;</span>
git push origin master
</code></pre></td></tr></table>
</div>
</div><p>最后在 gitee 项目页面中的 Gitee Pages 服务中点击 更新 即可。</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>本文于 2020-06-24 更新</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share"><span><a href="//www.linkedin.com/shareArticle?url=https%3a%2f%2fdiraclee.gitee.io%2f2020%2f06%2fbuild-blog-with-hugo%2f&amp;title=%e4%bd%bf%e7%94%a8hugo%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e5%8d%9a%e5%ae%a2" target="_blank" title="分享到 LinkedIn">
            <i class="fab fa-linkedin fa-fw"></i>
        </a><a href="//service.weibo.com/share/share.php?url=https%3a%2f%2fdiraclee.gitee.io%2f2020%2f06%2fbuild-blog-with-hugo%2f&amp;appkey=&amp;title=%e4%bd%bf%e7%94%a8hugo%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e5%8d%9a%e5%ae%a2" target="_blank" title="分享到 Weibo">
            <i class="fab fa-weibo fa-fw"></i>
        </a></span></div>
        </div>
    </div>

    <div class="post-info-more">
        <section><span class="tag">
                        <a href="https://diraclee.gitee.io/tags/hugo/"><i class="fas fa-tag fa-fw"></i>&nbsp;Hugo</a>&nbsp;
                    </span></section>
        <section>
            <span><a href="javascript:window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="https://diraclee.gitee.io">主页</a></span>
        </section>
    </div>

    <div class="post-nav">
            <a href="https://diraclee.gitee.io/2020/06/install_golong/" class="next" rel="next" title="Golang 的安装与配置">Golang 的安装与配置<i class="fas fa-angle-right fa-fw"></i></a></div>
</div><div class="post-comment"></div>
    </article></div>
            </main><footer class="footer">
    <div class="copyright"><div class="copyright-line">由 <a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="external nofollow noopener noreffer">LoveIt<i class="far fa-heart fa-fw"></i></a>
        </div>

        <div class="copyright-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2020</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://diraclee.gitee.io" target="_blank">Dirac Lee</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
    </div>
</footer></div><a href="#" class="dynamic-to-top" id="dynamic-to-top" data-scroll>
            <span>&nbsp;</span>
        </a><script src="/js/lib/jquery/jquery.slim.min.js"></script><script src="/js/lib/lazysizes/lazysizes.min.js"></script><script src="/js/lib/smooth-scroll/smooth-scroll.polyfills.min.js"></script><script>window.scroll = new SmoothScroll('[data-scroll]', {speed: 300, speedAsDuration: true});</script><link rel="stylesheet" href="/css/lib/katex/katex.min.css"><script src="/js/lib/katex/katex.min.js"></script><script defer src="/js/lib/katex/auto-render.min.js"></script><link rel="stylesheet" href="/css/lib/katex/copy-tex.min.css"><script defer src="/js/lib/katex/copy-tex.min.js"></script><script defer src="/js/lib/katex/mhchem.min.js"></script><script>
        document.addEventListener("DOMContentLoaded", function () {
            renderMathInElement(document.body, {
                delimiters: [
                    { left: "$$", right: "$$", display: true },
                    { left: "\\(", right: "\\)", display: false },
                    { left: "\\[", right: "\\]", display: true },{ left: "$", right: "$", display: false },]
            });
        });
    </script><script src="/js/blog.min.js"></script></body>
</html>